<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>季度柱形图</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        input {
            margin: 5px;
            padding: 5px;
        }

        button {
            margin: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .chart {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 300px;
            width: 100%;
            max-width: 600px;
            border-bottom: 1px solid #ccc;
        }

        .bar {
            background-color: #007BFF;
            margin: 0 5px;
            width: 50px;
            transition: height 0.3s ease;
        }

        .bar-label {
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <h1>季度柱形图</h1>
    <input type="number" id="q1" placeholder="第一季度值">
    <input type="number" id="q2" placeholder="第二季度值">
    <input type="number" id="q3" placeholder="第三季度值">
    <input type="number" id="q4" placeholder="第四季度值">
    <button onclick="generateChart()">生成柱形图</button>
    <div class="chart">
        <div class="bar" id="bar1"></div>
        <div class="bar" id="bar2"></div>
        <div class="bar" id="bar3"></div>
        <div class="bar" id="bar4"></div>
    </div>
    <div class="chart-labels">
        <span class="bar-label">第一季度</span>
        <span class="bar-label">第二季度</span>
        <span class="bar-label">第三季度</span>
        <span class="bar-label">第四季度</span>
    </div>

    <script>
        function generateChart() {
            const q1 = parseFloat(document.getElementById('q1').value) || 0;
            const q2 = parseFloat(document.getElementById('q2').value) || 0;
            const q3 = parseFloat(document.getElementById('q3').value) || 0;
            const q4 = parseFloat(document.getElementById('q4').value) || 0;

            const maxValue = Math.max(q1, q2, q3, q4);
            const chartHeight = 300;

            const bars = [q1, q2, q3, q4].map((value) => (value / maxValue) * chartHeight);

            document.getElementById('bar1').style.height = `${bars[0]}px`;
            document.getElementById('bar2').style.height = `${bars[1]}px`;
            document.getElementById('bar3').style.height = `${bars[2]}px`;
            document.getElementById('bar4').style.height = `${bars[3]}px`;
        }
    </script>
</body>

</html>
    